<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Trouble</title>
	<link rel="stylesheet" type="text/css" href='<?php echo asset_url()."css/bootstrap.css"; ?>'>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script>
	function showPass()
	{
		$("#password").removeClass("none");
		$("#password").addClass("showDIV");
		$("#username").removeClass("showDIV");
		$("#username").addClass("none");
	}

	function showUser()
	{
		$("#password").removeClass("showDIV");
		$("#password").addClass("none");
		$("#username").removeClass("none");
		$("#username").addClass("showDIV");
	}
	
	</script>
<style type="text/css">
.none { display:none; }, 
.showDIV { display:block;} 
.trouble
{
	margin-top: 150px;
	margin-left: 300px;
	
}
</style>
	
</head>
<body>

<div id="container">
<div class="trouble">
<form class="form-horizontal" action='<?php echo base_url();?>index.php/login/retrieve' method ="post">
<h2>Having trouble signing in?</h2>
<input type="radio" name="problem" value="1" onclick="showPass()">I don't know my password<br>
<div id="password" class="none">
<p style="font-size:12px;  margin-left: 25px;">To reset your password, enter the username you use to sign in to the website. </p>
<input type="text" name="uname" placeholder="Enter your username" style="margin-left: 25px; margin-bottom: 10px">
</div>
<input type="radio" name="problem" value="2" onclick="showUser()">I don't know my username<br>
<div id="username" class="none">
<p style="font-size:12px;  margin-left: 25px;">To get your username, please enter the email id you are associated with</p>
<input type="email" name="email" placeholder="Enter your email" style="margin-left: 25px; margin-bottom: 10px">
</div>
<button class="btn btn-large btn-primary" type="submit" value="submit">Go Ahead</button>
</form>
</div>
</div>

</body>
</html>